<template>
    <el-date-picker v-model="model" type="date" :editable="false" 
    :placeholder="placeholder" :picker-options="pickerOptions"
     @change="change" :state="state" :clearable="clearable" style="width:100%">
    </el-date-picker>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: "选择结束日期"
    },
    pickerOptions: {
      type: Object,
      required: true
    },
    startDateOptions: {
      type: Object,
      required: true
    },
    value: {
      type: [String, Date],
      required: true
    },
    clearable: {
      type: Boolean,
      default: false
    },
    //判断是否可以选择当日
    state:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      oldStartDateDisabled: null
    };
  },
  created() {
    this.oldStartDateDisabled = this.startDateOptions.disabledDate;
    this.change(this.value);
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(date) {
        this.$emit("input", date);
      }
    }
  },
  methods: {
    change(date) {
      let oldStartDateDisabled = this.oldStartDateDisabled;
      if(this.state){
        this.$emit('update:startDateOptions', {
          disabledDate(time) {
            return time.getTime() > new Date(date).getTime() - 864e5 || (oldStartDateDisabled && oldStartDateDisabled(time));
          }
        });
      }else{
        this.$emit("update:startDateOptions", {
        disabledDate(time) {
          return (
            (oldStartDateDisabled && oldStartDateDisabled(time)) || time.getTime() > new Date(date).getTime()
            );
          }
        });
      }
      this.$emit("change", date);
    }
  }
};
</script>

<style lang="scss" scoped>

</style>

